<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哥布林网站</title>
  <link rel="shortcut icon" href="./img/main.png" type="image/x-icon">
  <!-- 自定义css -->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <!-- 图标库 -->
  <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  <!-- 字体库 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
</head>

<body>
  <!-- 头部区 -->
  <header class="header">
    <a href="#" class="header-logo">COC-STATS</a>
    <ul class="nav-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clans</a></li>
      <li><a href="#">Town hall</a></li>
      <li><a href="#">Troops</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="bx bx-menu" id="menu-icon"></div>
  </header>

  <!-- 主体区 -->
  <section class="main">
    <div class="main-text">
      <h5>#2 Trending</h5>
      <h4>Lead Supercell</h4>
      <h1>GOBLINS</h1>
      <p>Join millions of players worlwide as you build your village, <br> raise a clan,and compete in epic Clan Wars!!
      </p>
      <a href="#">Compare</a>
      <a href="#" class="ctaa"><i class="ri-play-fill"></i>Watch Gameplay</a>
    </div>
    <div class="main-img">
      <img src="img/main.png">
    </div>
  </section>

  <div class="icons">
    <a href="#"><i class="ri-instagram-line"></i></a>
    <a href="#"><i class="ri-youtube-line"></i></a>
    <a href="#"><i class="ri-dribbble-line"></i></a>
  </div>

  <div class="scroll-down">
    <a href="#"><i class="ri-arrow-down-s-fill"></i></a>
  </div>

  <!-- 滚动动画库 -->
  <script src="https://unpkg.com/scrollreveal"></script>

  <!-- 自定义js -->
  <script src="js/script.js"></script>

</body>

</html>